#app-design {
  position: relative;

  display: flex;
  overflow: hidden;
  flex-direction: column;

  width: 100%;
  height: 100%;
  -webkit-box-orient: vertical;
  

  #proto-main-content {
    position: relative;

    display: flex;
    flex: 1;
    -webkit-box-orient: vertical;
    justify-content: space-between;

    #design {
      position: fixed;

      background: #f5f5f5;

      .design-viewport {
        position: relative;

        width: 500px;
        height: 500px;

        background: #fff;

        #widget-list {
          position: absolute;
          width: 100%;
          height: 100%; // inherit 
// https://www.jianshu.com/p/c47e3377bf10
          // 更加复杂的网格，使用两副间隔线组合起来的网格。
          height: 100%; // inherit 
// position: relative;

          border: 1px saddlebrown solid;
          background: #fff;
          background-image: linear-gradient(90deg,
          #e9e9e9 1px,
          transparent 0),
          linear-gradient(#e9e9e9 1px, transparent 0),
          linear-gradient(90deg, #f8f8f8 1px, transparent 0),
          linear-gradient(#f8f8f8 1px, transparent 0);
          background-size: 40px 40px, 40px 40px, 10px 10px, 10px 10px;

          // TODO 测试
          .widget{
            position: absolute;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background: #ee8;
            color: #333;
            font-weight: bold;
            border: 1px solid #333;
            box-sizing: border-box;
          }
          .widget:first-child{
            top: 150px;
            left: 100px;
          }
          
        }
        // end #widget-list

        .no-zoom-area.handler {
          z-index: 15;

          .selection-handler {
            position: absolute;

            .rect-select {
              position: absolute;

              pointer-events: none;

              * {
                pointer-events: auto;
              }

              .rotate {
                position: absolute;
                top: -26px;
                left: 50%;

                display: flex;
                align-items: center;
                justify-content: center;

                width: 18px;
                height: 18px;
                margin-left: -9px;

                cursor: pointer;

                .icon {
                  color: #298df8;
                }

                span {
                  font-size: 10px;

                  position: absolute;
                  top: 3px;

                  display: flex;
                  align-items: center;

                  justify-self: center;
                }
              }

              // end 旋转

              .square {
                position: absolute;

                width: 7px;
                height: 7px;

                border-width: 1px;
                border-style: solid;
                border-color: #298df8;
                border-radius: 50%;
                background: white;
              }

              .t,
              .b {
                left: 50%;

                margin-left: -3px;
              }

              .l,
              .r {
                top: 50%;

                margin-top: -3px;
              }

              .r,
              .tr,
              .br {
                right: -3px;
              }

              .r,
              .tr,
              .br {
                right: -3px;
              }

              .tl,
              .l,
              .bl {
                left: -3px;
              }

              .b,
              .bl,
              .br {
                bottom: -3px;
              }

              .resizable-handler {
                position: absolute;
                z-index: 10;

                width: 14px;
                height: 14px;

                cursor: pointer;
                // border: red 1px solid;
              }

              .resizable-handler.t,
              .resizable-handler.b {
                margin-left: -7px;
              }

              .resizable-handler.tl,
              .resizable-handler.l,
              .resizable-handler.bl {
                left: -7px;
              }

              .l,
              .r {
                top: 50%;

                margin-top: -3px;
              }

              .resizable-handler.tl,
              .resizable-handler.t,
              .resizable-handler.tr {
                top: -7px;
              }

              .t,
              .b {
                left: 50%;

                margin-left: -3px;
              }

              .t,
              .tl,
              .tr {
                top: -3px;
              }

              .resizable-handler.br,
              .resizable-handler.r,
              .resizable-handler.tr {
                right: -7px;
              }

              .resizable-handler.bl,
              .resizable-handler.b,
              .resizable-handler.br {
                bottom: -7px;
              }
            }
          }

          // end selection-handler

          .move-reference-line {
            position: absolute;

            .move-lines {
              .text {
                font-size: 9px;

                position: absolute;

                color: red;
              }

              .line {
                position: absolute;
                z-index: 999;
                top: 227px;
                left: 645px;

                width: 100px;

                pointer-events: none;
              }

              // 参考且竖线
              .reference.vertical {
                width: 1px;

                border-right: 1px #5fddf2 solid;
              }

              // 参考且横线
              .reference.horizontal {
                height: 1px;

                border-top: 1px #5fddf2 solid;
              }

              // 距离且竖线
              .distance.vertical {
                width: 1px;

                border-left: 1px red solid;
              }

              // 距离且横线
              .distance.horizontal {
                height: 1px;

                border-top: 1px red solid;
              }

              // hr{
              //     height: 1px;
              //     background: red;
              // }
            }
          }

          // end 参考线等

          // 选中的框
          .select-borders {
            position: absolute;
            z-index: 0;

            width: 100%;
            height: 100%;

            pointer-events: none;

            .items-total-border,
            .item-select-border {
              position: absolute;

              box-sizing: border-box;

              pointer-events: none;

              border: 1px solid #298df8;
            }

            .item-hover-border {
              position: absolute;

              box-sizing: border-box;

              pointer-events: none;

// 虚线

              border: 1px dashed #298df8;
            }
          }

          // end 选中的框
        }

        // end .no-zoom-area.handler 边框
      }

      // end .design-viewport

      .zoom-area {
        position: absolute;
        top: 0;
        left: 0;

        width: 100%;
        height: 100%;

        transform-origin: center center;
      }

      .editing-text-area {
        pointer-events: none;
      }
    }

    // end #design
  }
}
